import DGListView from "../../../components/DGListView.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGConnect from "../../../sources/DGConnect.ts";
import DGFadeView from "../../../components/DGFadeView.tsx";
import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import AppProvider from "../../../sources/AppProvider.ts";
import {ArrowBack} from "@mui/icons-material";
import DGFooterView from "../../../components/DGFooterView/DGFooterView.tsx";
import {Box, useTheme} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import DGTextView from "../../../components/DGTextView.tsx";
import DGOpenLink from "../../../components/DGOpenLink.tsx";

const DGSecurityOnlineForm = () => {
    // 全局上下文
    const App = AppProvider.useAppContext();
    // 查询模式
    const m = useTheme().palette.mode === "light";
    // 路由跳转
    const router = useNavigate();
    // 跳转链接提示面板
    const [link, setLink] = useState({state: false, name: "", link: ""});

    // 关闭面板
    const handleClose = (id: number) => {
        setLink({state: false, name: link.name, link: link.link});
        if (id === 1) router(-1);
    }

    // 设置跳转链接面板
    const SetLink = (state: boolean, name: string, link: string) => {
        // 设置链接面板信息
        setLink({state: state, name: name, link: link});
        // 推入历史堆栈
        router("?security");
    }

    // 加载返回和后退识别
    useEffect(() => {
        const handlePopState = () => handleClose(0);
        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, []);

    useEffect(() => {
        App?.setTitle("在线表单");
    }, [App]);
    return (<DGFadeView time={800} load autoLoad>

        {/* 打开链接弹窗 */}
        <DGOpenLink state={link.state} close={() => handleClose(1)} name={link.name} link={link.link}/>

        {/* 返回选项 */}
        <Box style={{
            margin: "15px 15px", padding: "10px 15px",
            display: "flex", alignItems: "center", gap: "15px",
            backgroundColor: m ? "#EDEDED" : "#222222",
        }}>
            <IconButton onClick={() => router(-1)}><ArrowBack/></IconButton>
            <DGTextView Body Bold>返回安全中心</DGTextView>
        </Box>


        {/* 在线账户表单 */}
        <DGListView
            title="在线账户表单" subTitle="与账户相关的在线表单，请根据您的需求选择。"
            NoBackground Margin="15px" gap={15}>
            {/* 解除邮箱锁定 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("change_email.png")}
                title="解除邮箱锁定表单" subText="为您解除被锁定 168 小时的电子邮箱。"
                onClick={() => SetLink(true, "解除邮箱锁定表单", "https://docs.qq.com/form/page/DSkZTRk5kdUxSelly")}/>
            {/* 忘记账户表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("forget_account.png")}
                title="找回账号表单" subText="申诉找回您的逐梦园账号。"
                onClick={() => SetLink(true, "找回账号表单", "https://docs.qq.com/form/page/DSklack90dmtQUGl1")}/>
            {/* 忘记密码表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("forget_password.png")}
                title="找回密码表单" subText="申诉找回您的逐梦园账户登录密码。"
                onClick={() => SetLink(true, "找回密码表单", "https://docs.qq.com/form/page/DSkx6R3hZZ3h2enhB")}/>
            {/* 更换邮箱表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("change_email.png")}
                title="更换邮箱表单" subText="绑定账户的邮箱不可用或不再使用时。"
                onClick={() => SetLink(true, "更换邮箱表单", "https://docs.qq.com/form/page/DSlJTRHRXdWxueUVa")}/>
            {/* 冻结账号表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("change_email.png")}
                title="冻结账户表单" subText="账号存在被盗、设备丢失等风险，可以进行冻结账户。"
                onClick={() => SetLink(true, "冻结账户表单", "https://docs.qq.com/form/page/DSlBreFpDZGdIVml2")}/>
            {/* 解冻账户表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("change_email.png")}
                title="解冻账户表单" subText="风险解除后，可以申请解除您的账户的冻结锁定状态。"
                onClick={() => SetLink(true, "解冻账户表单", "https://docs.qq.com/form/page/DSkdmd2ZKREdKaE9B")}/>
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("account_delete.png")}
                title="注销账户表单"
                subText="申请注销您的账户，此操作将会永久删除您的数据。与自助注销不同，使用此方式注销，关联的数据将会被工作人员一并清除，并且没有等待期限。"
                onClick={() => SetLink(true, "注销账户表单", "https://docs.qq.com/form/page/DSm1MV2VISnpBckJI")}/>
        </DGListView>
        {/* 网站底部 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default DGSecurityOnlineForm;